<template>
  <!-- 合作伙伴列表主容器 -->
  <div>
    <h1>合作伙伴</h1>
    <!-- 使用 Element Plus 的表格组件展示合作伙伴列表 -->
    <el-table :data="partners" style="width: 100%">
      <el-table-column prop="name" label="名称" width="200" />
      <el-table-column prop="description" label="简介" />
      <el-table-column prop="website" label="官网" width="200">
        <template #default="scope">
          <a :href="scope.row.website" target="_blank">{{ scope.row.website }}</a>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
// 引入 Nuxt3 的 onMounted 生命周期钩子和 ref 响应式变量
import { ref, onMounted } from 'vue'

// 定义响应式变量 partners 用于存储合作伙伴列表
const partners = ref([])

// 页面加载时自动获取合作伙伴列表
onMounted(async () => {
  const res = await fetch('/api/partners')
  const data = await res.json()
  partners.value = data
})
</script>

<style scoped>
h1 {
  margin-bottom: 20px;
}
</style> 